﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spa Land - Body & Massage Therapy HTML Template | Shop Single </title>

<!-- Stylesheets -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">

<!--Color Switcher Mockup-->
<link href="/css/color-switcher-design.css" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
<link rel="icon" href="/images/favicon.png" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">
 	
    <!-- Preloader -->
    <div class="preloader"></div>
 	
    <!-- Main Header-->
    <header class="main-header header-style-three">
    	
        <!--Header Top-->
    	<div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
               <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->
        
        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->
    
 	<!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/13.jpg);">
        <div class="auto-container">
        	<div class="inner-container clearfix">
	            <h1>产品细节</h1>
	            <ul class="bread-crumb clearfix">
	                <li><a href="index.html">首页 </a></li>
	                <li>产品细节</li>
	            </ul>
        	</div>
        </div>
    </section>
    <!--End Page Title-->

    <!--Sidebar Page Container-->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">

                <!--content side-->
                <div class="content-side col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="product-details">
                        
                        <!--Basic Details-->
                        <div class="basic-details">
                            <div class="row clearfix">
                                <div class="image-column col-md-5 col-sm-12 col-xs-12">
                                    <figure class="image-box"><a  class="lightbox-image" title="Image Caption Here"><img th:src="'http://47.94.10.67/images/' + ${product.imgUrl}" alt=""></a></figure>
                                </div>
                                <div class="info-column col-md-7 col-sm-12 col-xs-12">
                                    <div class="inner-column">
                                        <div class="details-header">
                                            <input type="hidden" id="productId" th:value="${product.id}">
                                            <h4 th:text="${product.title}"></h4>
                                            <del th:text="'原价：' + ${product.oldProce} + '元'"></del>
                                            <span class="price" th:text="'现价：'+${product.nowPrice} + '元'"></span>
                                            <br>
                                            <div class="rating">
                                                <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
                                            </div>

                                        </div>
                                        <div class="text" th:text="${product.productDesc}"></div>
                                        <div class="clearfix">
                                            <div class="item-quantity"><input class="quantity-spinner" id="number" type="text" value="1" name="quantity"></div>
                                            <button type="button" onclick="addProduct()" class="theme-btn btn-style-two">添加到购物车 <i class="fa fa-angle-double-right"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Basic Details-->

                        <!--Product Info Tabs-->
                        <div class="product-info-tabs">
                            <!--Product Tabs-->
                            <div class="prod-tabs tabs-box" id="product-tabs">
                            
                                <!--Tab Btns-->
                                <ul class="tab-btns tab-buttons clearfix">
                                    <li data-tab="#prod-description" class="tab-btn active-btn">描述</li>

                                </ul>
                                
                                <!--Tabs Content-->
                                <div class="tabs-container tabs-content">
                                    
                                    <!--Tab / Active Tab-->
                                    <div class="tab  active-tab" id="prod-description">
                                        
                                        <div class="content">
                                            <p th:text="${product.productDesc}"></p>
                                        </div>
                                    </div>

                                    <!--Tab-->
                                    <!--<div class="tab active-tab" id="prod-reviews">-->

                                        <!--&lt;!&ndash;Reviews Container&ndash;&gt;-->
                                        <!--<div class="reviews-container">-->
                                            <!---->
                                            <!--&lt;!&ndash;Reviews&ndash;&gt;-->
                                            <!--<article class="review-box clearfix">-->
                                                <!--<figure class="rev-thumb"><img src="/images/resource/review-thumb-1.jpg" alt=""></figure>-->
                                                <!--<div class="rev-content">-->
                                                    <!--<div class="rev-info"><span>James Koster</span> June 7, 2013</div>      -->
                                                    <!--<div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>-->
                                                    <!--<div class="rev-text"><p>Product is simply dummy text of the printing and typesetting Autocare. It has been the workshop.</p></div>-->
                                                <!--</div>-->
                                            <!--</article>-->
                                            <!--&lt;!&ndash;Reviews&ndash;&gt;-->
                                            <!--<article class="review-box clearfix">-->
                                                <!--<figure class="rev-thumb"><img src="/images/resource/review-thumb-3.jpg" alt=""></figure>-->
                                                <!--<div class="rev-content">-->
                                                    <!--<div class="rev-info"><span>Magnus</span> June 7, 2013</div>      -->
                                                    <!--<div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>-->
                                                    <!--<div class="rev-text"><p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,</p></div>-->
                                                <!--</div>-->
                                            <!--</article>-->
                                            <!---->
                                        <!--</div>-->
                                        <!---->
                                        <!--&lt;!&ndash; Comment Form &ndash;&gt;-->
                                        <!--&lt;!&ndash;<div class="shop-comment-form"> &ndash;&gt;-->
                                            <!--&lt;!&ndash;<h2>添加评论</h2>&ndash;&gt;-->
                                            <!--&lt;!&ndash;<div class="rating-box">&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="text"> 你的评分:</div>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="rating"><a href="#"><span class="fa fa-star-o"></span></a><a href="#"><span class="fa fa-star-o"></span></a><a href="#"><span class="fa fa-star-o"></span></a><a href="#"><span class="fa fa-star-o"></span></a><a href="#"><span class="fa fa-star-o"></span></a>&ndash;&gt;-->
                                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                            <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                            <!--&lt;!&ndash;<form method="post" action="contact.html">&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<label>你的意见*</label>&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<textarea name="message" placeholder=""></textarea>&ndash;&gt;-->
                                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<label>您的姓名</label>&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<input type="text" name="username" placeholder="" required>&ndash;&gt;-->
                                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<label>您的电子邮件</label>&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<input type="text" name="number" placeholder="" required>&ndash;&gt;-->
                                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                                <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
                                                    <!--&lt;!&ndash;<button class="theme-btn btn-style-four" type="submit" name="submit-form">现在提交</button>&ndash;&gt;-->
                                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                                <!--&lt;!&ndash;&ndash;&gt;-->
                                            <!--&lt;!&ndash;</form>&ndash;&gt;-->
                                                <!--&lt;!&ndash;&ndash;&gt;-->
                                        <!--&lt;!&ndash;</div>&ndash;&gt;-->

                                    <!--</div>-->
                                </div>
                            </div>
                        </div><!-- End product info tabs -->
                    </div>
                </div>

                <!--Sidebar Side-->
                <div class="sidebar-side col-lg-3 col-md-4 col-sm-12 col-xs-12">
                    <aside class="sidebar shop-sidebar">
                        
                        <!--search box-->
                        <div class="sidebar-widget search-box">
                            <form method="post" action="blog.html">
                                <div class="form-group">
                                    <input type="search" name="search-field" value="" placeholder="搜索产品" required="">
                                    <button type="submit"><span class="icon fa fa-search"></span></button>
                                </div>
                            </form>
                        </div>

                        <!--Price Filter Widget-->
                        <div class="sidebar-widget price-filter-widget">
                            <div class="sidebar-title"><h2>过滤价格</h2></div>
                            <div class="widget-content">
                                <div class="range-slider-one clearfix">
                                    <div class="price-range-slider"></div>
                                    <div class="clearfix">
                                        <div class="pull-left">
                                            <a href="#" class="theme-btn btn-style-four">过滤</a>
                                        </div>
                                        <div class="pull-right">
                                            <div class="title">价格:</div>
                                            <div class="input"><input type="text" class="property-amount" name="field-name" readonly></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Top Related Posts -->
                        <div class="sidebar-widget related-posts">
                            <div class="sidebar-title"><h2>热门产品</h2></div>
                            <div class="widget-content">
                                <!-- Related Post -->
                                <div class="post">
                                    <figure class="post-thumb"><a href="shop-detail.html"><img src="/images/resource/products/thumb-1.jpg" alt=""></a></figure>
                                    <h4><a href="shop-detail.html">商品一</a></h4>
                                    <span class="price">$287</span>
                                    <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span></div>
                                </div>

                                <!-- Related Post -->
                                <div class="post">
                                    <figure class="post-thumb"><a href="shop-detail.html"><img src="/images/resource/products/thumb-2.jpg" alt=""></a></figure>
                                    <h4><a href="shop-detail.html">商品二</a></h4>
                                    <span class="price">$18.00</span>
                                    <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span></div>
                                </div>

                                <!-- Related Post -->
                                <div class="post">
                                    <figure class="post-thumb"><a href="shop-detail.html"><img src="/images/resource/products/thumb-3.jpg" alt=""></a></figure>
                                    <h4><a href="shop-detail.html">商品三</a></h4>
                                    <span class="price">$20.00</span>
                                    <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span></div>
                                </div>
                            </div>
                        </div>  


                    </aside>
                </div>
            </div>
        </div>
    </div>
    <!--End Sidebar Page Container-->

    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>    
<!--End pagewrapper-->

<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/mixitup.js"></script>
<script src="/js/jquery.bootstrap-touchspin.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
    function addProduct() {
        var number = $("#number").val();
        // alert(number)
        if (number <= 0) {
            alert("其选择大于0的数值")
        }
        var productId = $("#productId").val();
        // alert(productId)
        window.location.href = '/cart/addCart?productId=' + productId + '&quantity=' + number;
    }
</script>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
</script>